<template>
  <div class="monaco-editor-container" ref="editorContainer"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, onBeforeUnmount } from 'vue';
import * as monaco from 'monaco-editor';

export default defineComponent({
  name: 'MonacoEditorTest',
  props: {
    code: {
      type: String,
      default: '// Type your code here\nconsole.log("Hello Monaco!");'
    },
    language: {
      type: String,
      default: 'javascript'
    }
  },
  setup(props) {
    const editorContainer = ref<HTMLElement | null>(null);
    let editor: monaco.editor.IStandaloneCodeEditor | null = null;

    onMounted(() => {
      if (editorContainer.value) {
        editor = monaco.editor.create(editorContainer.value, {
          value: props.code,
          language: props.language,
          theme: 'vs-dark',
          automaticLayout: true,
          minimap: {
            enabled: true
          }
        });
      }
    });

    onBeforeUnmount(() => {
      if (editor) {
        editor.dispose();
      }
    });

    return {
      editorContainer
    };
  }
});
</script>

<style scoped>
.monaco-editor-container {
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
}
</style>